<script  setup>
import { ref } from 'vue'
import {Document,Menu as IconMenu,Location,Setting,} from '@element-plus/icons-vue'
import {useStore} from '@/store/counter.js'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'

const store = useStore()
const router = useRouter()
const activeIndex = ref('1')
const selectOption =() => {
  console.log('开始选择');
  
}
// 退出登录
const logout = ()=> {
  console.log(store);
  
  store.userInfo = {}
  store.token = ''
  localStorage.setItem('token', '')
  ElMessage.success('退出成功')
  
  router.push('/login')
}

</script>

<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      style="display: flex; justify-content: flex-end;"
      mode="horizontal"
      @select="selectOption"
    >
      <el-menu-item index="1">
        <el-button type="primary" plain>可视化大屏</el-button>
      </el-menu-item>
      <el-sub-menu index="2" span="10">
        <template #title>
            <el-icon><setting /></el-icon>
           <span>设置</span>
        </template>
        <el-menu-item index="2-1">语言切换</el-menu-item>
        <el-menu-item index="2-2">项目地址</el-menu-item>
        <el-menu-item index="2-3" @click="logout" >退出登录</el-menu-item>
      </el-sub-menu>

    </el-menu>
    <div class="h-6" />
  </template>

<style lang="scss" scoped>

</style>
  